<template>
    <div class="card">
        <div class="card-box" :class="{ 'start': active_key >= 0 }">
            <div class="card-box-item" @click="itemClick(key)" v-for="item, key in card"
                :key="'card-box-item' + item.container.count" :class="{ 'card-box-item-active': key == active_key }">
                <div class="card-box-item-container">
                    <div class="card-box-item-containerInner">
                        <div class="card-box-item-banner"><img :src="item.background" alt=""></div>
                        <div class="card-box-item-content">
                            {{ item.container.count }}
                        </div>
                        <span class="card-box-item-close">
                            <span @click.stop="close"></span>
                        </span>
                    </div>
                </div>
                <dir class="card-box-item-hover">
                    <div class="card-box-item-hover-light">{{ item.container.count }}</div>
                </dir>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            active_key: undefined,
            card: [
                {
                    background: require("../../src/assets/img0.jpg"),
                    container: {
                        count: "1"
                    }
                },
                {
                    background: require("../../src/assets/img1.jpg"),
                    container: {
                        count: "2"
                    }
                },
                {
                    background: require("../../src/assets/img2.jpg"),
                    container: {
                        count: "3"
                    }
                },
                {
                    background: require("../../src/assets/img3.jpg"),
                    container: {
                        count: "4"
                    }
                },
            ]
        }
    },
    methods: {
        itemClick(key) {
            console.log(key);
            this.active_key = key;
        },
        close() {
            this.active_key = undefined;
        },
    }
}
</script>

<style scoped lang="less">
.card {
    width: 1000px;
    height: 600px;

    .card-box {
        width: 100%;
        height: 100%;
        position: relative;
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;

        .card-box-item {
            width: 24%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 1;
            background: #333;
            transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
            //这个属性比较牛掰, transition: type 一个时间就是动画时间,两个时间1是等待2时过度时间 多个分别设置用","分割

            .card-box-item-container {
                width: 100%;
                height: 100%;
                overflow: hidden;
                position: relative;
            }

            .card-box-item-containerInner {
                overflow: hidden;
                width: 100%;
                height: 100%;
                position: relative;

                .card-box-item-banner {
                    width: 100%;
                    height: 100%;
                    opacity: .8;

                    img {
                        width: 1000px;
                        display: block;
                    }
                }

                .card-box-item-content {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    text-align: center;
                    font-size: 48px;
                    line-height: 7;
                }

                .card-box-item-close {
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    width: 50px;
                    height: 50px;
                    z-index: 99;

                    span {
                        position: relative;
                        width: 50px;
                        height: 50px;
                        display: block;
                        opacity: 0;
                        transition: all .3s linear;

                        &::after {
                            transition: all .3s linear;
                            content: '';
                            position: absolute;
                            left: 0px;
                            top: 50%;
                            display: block;
                            width: 100%;
                            height: 4px;
                            background: gold;
                            transform: rotateZ(-45deg);
                        }

                        &::before {
                            transition: all .3s linear;
                            content: '';
                            display: block;
                            position: absolute;
                            left: 0px;
                            top: 50%;
                            width: 100%;
                            height: 4px;
                            background: gold;
                            transform: rotateZ(45deg);
                        }
                    }

                }
            }
        }

        .card-box-item:nth-child(1) {
            transform: translate3d(0%, 0, 0);
        }

        .card-box-item:nth-child(2) {
            transform: translate3d(105%, 0, 0);
        }

        .card-box-item:nth-child(3) {
            transform: translate3d(210%, 0, 0);
        }

        .card-box-item:nth-child(4) {
            transform: translate3d(316%, 0, 0);
        }



    }
}


.card-box-item-active {
    width: 100% !important;
    z-index: 2 !important;
    transform: translate3d(0%, 0, 0) !important;
    transition: transform 0.6s, width 0.7s 0.7s, z-index 0s !important;
}

.card-box-item-active .card-box-item-banner {
    opacity: 1 !important;
}

// css选择器 除了指定选择器不设置
.start .card-box-item:nth-child(1):not(.card-box-item-active) {
    transform: translate3d(0%, 0, 0) scale(.5);
    transition: transform 0.95s, opacity 0.95s;
}

.start .card-box-item:nth-child(2):not(.card-box-item-active) {
    transform: translate3d(105%, 0, 0) scale(.5);
    transition: transform 0.95s, opacity 0.95s;
}

.start .card-box-item:nth-child(3):not(.card-box-item-active) {
    transform: translate3d(210%, 0, 0) scale(.5);
    transition: transform 0.95s, opacity 0.95s;
}

.start .card-box-item:nth-child(4):not(.card-box-item-active) {
    transform: translate3d(316%, 0, 0) scale(.5);
    transition: transform 0.95s, opacity 0.95s;
}

.start .card-box-item-active .card-box-item-close {
    span {
        opacity: 1 !important;
        transition-delay: 1s !important;

        &::after {
            transition-delay: 1.3s !important;
            transform: rotateZ(-50deg) !important;
        }

        &::before {
            transition-delay: 1.3s !important;
            transform: rotateZ(50deg) !important;
        }
    }
}
</style>


<!-- hover -->
<style scoped lang="less">
// item 背景图的高亮
.card-box-item {
    .card-box-item-banner {
        transition: opacity .3s linear;
    }

    &:hover .card-box-item-banner {
        opacity: 1 !important;
    }

    &:hover .cbihl-temp {
        transform: translate3d(0, 0, 0) !important;
    }

    &:hover .bihl-temp:before {
        transform: translate3d(0, 0, 0) !important;
    }


}




.card-box:not(.start) {
    .card-box-item:hover .card-box-item-hover {
        top: 0px;
        opacity: 1;

        .card-box-item-hover-light {
            opacity: 1;
            background-size: 100% 0%;
        }
    }

}

.card-box-item-hover {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    position: absolute;
    left: 0px;
    top: 10%;
    opacity: 0;
    transition: top .5s, opacity .3s;

    .card-box-item-hover-light {
        font-size: 120px;
        text-align: center;
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        transform: translateY(50%);
        opacity: 0;
        font-weight: 600;
        background: gold -webkit-linear-gradient(top, rgb(119, 102, 102), rgb(158, 129, 129)) no-repeat;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        background-size: 100% 100%;
        transition: opacity .3s 0s, background .8s .2s;
    }
}
</style>
